<template>
  <div :data-id="data.id"></div>
</template>

<script lang="ts" setup>
interface IProps {
  data: any;
}

const { cimInstance } = window;
const mounted = ref(false);
const props = withDefaults(defineProps<IProps>(), { data: { id: '' } });

const render = () => {
  try {
    const { data, ...restData } = props.data;
    const layerData = { ...restData, ...data, name: restData.id };
    if (mounted.value) {
      if (layerData.dataSourceUrl) {
        layerData.show = true;
        cimInstance.api.updateColorParam(layerData.id, layerData);
      } else {
        layerData.show = false;
        cimInstance.api.updateGlobeColor(layerData);
      }
    } else {
      if (layerData.dataSourceUrl) {
        layerData.show = true;
        cimInstance.api.addLayerByType(layerData);
      } else {
        layerData.show = false;
        if (layerData.source == 'ditu') {
          layerData.globeColor = '#30558F';
        } else {
          layerData.globeColor = '#DCDCDC';
        }
        cimInstance.api.updateGlobeColor(layerData);
      }
      mounted.value = true;
    }
  } catch (error) {
    console.log(error);
  }
};

watch(props.data, render, { deep: true, immediate: true });

onUnmounted(() => {
  cimInstance.api.destroyLayer(props.data.id);
  cimInstance.api.updateGlobeColor({
    show: true,
  });
});
</script>

<style lang="less" scoped></style>
